<template>
    <div style="background-color:black;color:black">
        <!-- <el-button @click="drawer = true" type="primary" style="margin-left: 16px;" label="ttb">
        点我打开
        </el-button> -->
		<div class="cart" @click="jumplogin()">
			<p>购物车{{totalnumber}}&nbsp;▼</p>
		</div>
        <el-drawer title="购物车" :visible.sync="drawer" size="80%" :direction="direction" class="drawer">
            <div style="width: 100%;">
                <!-- <LoginRegister></LoginRegister> -->
                <ShoppingCart @close_cart="close_cart"></ShoppingCart>
            </div>
        </el-drawer>
    </div>
</template>

<script>
import ShoppingCart from "./ShoppingCart.vue";
import LoginRegister from "./LoginRegister.vue";
import { mapState,mapGetters,mapMutations} from "vuex"

 export default {
    name:'DropDownShoppingCart',
    data() {
      return {
	    drawer: false,
        direction: 'ttb',
      };
    },
    components:{
        ShoppingCart,
        LoginRegister
    },
    methods: {
				close_cart() {
					this.drawer = false;
				},
        handleClose(done) {
            this.$confirm('还有未保存的工作哦确定关闭吗？')
            .then(_ => {
                done();
            })
            .catch(_ => {});
        },
        jumplogin(){
            if (this.active_user){
                this.drawer = true
            } else{
								this.$message({
									message: '请先登录',
									type: 'warning',
									center: true,
									showClose: true
								})
                this.showlogreg(true)
            }
        },
        ...mapMutations('logreg',[
            'showlogreg'
        ])
    },
	computed: {
        ...mapState('cart',[
            'totalnumber'
		]),
        ...mapState('logreg',[
            'active_user',
        ])
	}
  };
</script>

<style lang="less">
	.drawer {
		.el-drawer__body {
			overflow-y: scroll;
			overflow-x: hidden;
		}
	}
	
	div.cart>p:first-child {
	  text-decoration: none;
	  font-weight: 500;
	  font-size: .875rem;
	  letter-spacing: .0892857143em;
	  font: inherit;
		line-height: 40px;
		padding-left: 20px;
		border-radius: 10px;
		background-image: url('../assets/shoppingcart.png');
		background-repeat: no-repeat;
		background-size: 20px 20px;
		background-position: 15px 9px;
	}
	div.cart {
		text-align: center;
	  width: 9em;
	  height: 2.7em;
	  position: absolute;
	  left: 60%;
	  top: 1.7em;
	  border-radius: 10px;
	  border-top: #fff 1px solid;
		color: white;
	}
	div.cart>p:first-child:hover {
	  background-color: rgb(71, 71, 71);
	  color:whitesmoke;
	  cursor: pointer;
	}
</style>